<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.bg{
		
/*			视口高度*/
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 100px;
			background-image: url("https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg");
			background-size: cover;
		}
		.header{
			width: 80%;
			height: 30px;
			margin: 0 auto;
			padding: 30px 0;
		}
		.header>img{
			float: left;
			height: 25px;
		}
		.login{
			float: right;
			color: #fff;
			font-size: 12px;
		}
		.logo{
			width: 600px;
			height: 200px;
			margin: 0 auto;
			display: block;
		}
		.list{
			width: 930px;
			height: 50px;
			margin: 0 auto;
			margin-top: 70px;
		}
		.list>a{
			width: 170px;
			height: 50px;
			background-color: #0099ff;
			border-radius: 8px;
			margin: 0px 8px;
			float: left;
			font-size: 14px;
			color: #fff;
			text-decoration: none;
			line-height: 50px;
			text-align: center;

		}
		.item img{
			width: 24px;
			height: 24px;
			vertical-align: middle;
			margin-right: 10px;
		}
		.active{
			transition: all .8s;
			overflow: hidden;
		}
		.active:hover{
			height: 100px;
			margin-top: -25px;
		}
		.active:hover>img{
			display: none;
		}
		.active:hover>span{
			display: none;
		}
		.hover-box{
			display: none;
		}
		.active:hover .hover-box{
			display: block;
		}
	</style>
</head>
<body>
	<div class="bg">
		<div class="header">
			<img src="https://mdn.alipayobjects.com/huamei_gk2yv1/afts/img/A*D2VVQIehGhwAAAAAAAAAAAAADneBAQ/original">
			<div class="login">
				<span>我已有支付宝</span>
				<span>快速登录</span>
			</div>
		</div>
		<img class="logo" src="https://img.alicdn.com/tps/TB1POhqIFXXXXXbXFXXXXXXXXXX.png">
		
		<div class="list">
			<a href="" class="item">
				<img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
				<span>我是服务商</span>
			</a>

			<a href="" class="item">
				<img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
				<span>我是服务商</span>
			</a>
			<a href="" class="item active">
				<img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
				<span>我是服务商</span>
				<div class="hover-box">
					<span>我是支付宝</span>
					<hr>
					<span>我是个人用户</span>
				</div>
			</a>
			<a href="" class="item">
				<img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
				<span>我是服务商</span>
			</a>
			<a href="" class="item">
				<img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
				<span>我是服务商</span>
			</a>

		</div>


	</div>


	



</body>
</html>